<template>
  <div class="standard-grid --padding-horizontal --auto-rows latest-index">
    <div class="latest-index__container">
      <div class="latest-index__content">
          <div class="latest-index__item" v-for="(list,index) in latestList" :key="index">
            <a :href="'/latest/'+ list.ranKid + '?name=' + list.name">
              <img :src="list.imgUrl" alt="">
              <h2>{{list.name}}</h2>
            </a>
          </div>
      </div>
    </div>
  
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import  Component from 'vue-class-component'
  import ModalSong from "~/components/common/modal-song"
  import {latestListInterface} from "../../interfaces/latestListInterface";
  import {Prop} from "vue-property-decorator";
  import {LatestInterface, ListInterface} from "../../interfaces/PageInterface";

  @Component({
    components:{
      ModalSong
    }
  })
  export  default  class LatestIndex extends Vue  {
    @Prop({}) skinValue
    @Prop({type:Object}) lists:LatestInterface

    private  modal =false
    private hideModal(val){
      this.modal=val
    }


   private playSong(){
     // this.modal=true
   }

   get latestList():ListInterface[]{
      return this.lists.list.map(({imgurl,rankid,rankname}) => {
        return {
          imgUrl:imgurl.replace('{size}',150),
          name:rankname,
          ranKid:rankid
        }
      })
   }

   mounted(){
      console.log(this.lists)
   }

  }

</script>

<style lang="scss">

  @include component(latest-index){
    @extend %padding;

    @include part(container){
      grid-column: 1 / 2 span;


    }
    @include part(content){
      display: flex;
      flex-wrap: wrap;
      text-align: center;
    }

    @include part(item){
      width: 20%;
      margin-right: 5%;
      margin-top: $mobile-row-1;

      @for $i from 1 through 4{
        &:nth-child(#{$i}){
          margin-top: 0;
        }
      }

      img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        box-shadow: 1px 1px 3px;
        border-radius: 5px;
      }

      h2{
        @include baseline($font-size-0875,$skip-lines:1,$auto-lines:false);
        color: $color-043644;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      a{
        color: #122025;
      }
    }


  }

</style>
